<template>
    <div class="app-container">
        <div class="mixin-components-container">
            <el-row class="title">
                <span>订单编号：{{ oid }}</span>
                <span>创建时间：{{ detail.create_time }}</span>
            </el-row>

            <el-table :data="detail.goods" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" :selectable="ableRow"> </el-table-column>
                <el-table-column label="商品" width="380">
                    <template slot-scope="{row}">
                        <img v-if="row.product_image" :src="row.product_image" class="avatar"
                            style="float:left;margin-right:5px;max-width: 80px;max-height: 80px;padding: 1px;border:1px solid #ddd;"></img>
                        <p class="goods-name">{{ row.goods_name }}</p>
                        <p class="goods-name" v-if="row.spec">规格：{{ row.spec }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="retail_price" label="价格" align="center"> </el-table-column>
                <el-table-column prop="num" label="数量" align="center"> </el-table-column>
                <el-table-column label="优惠金额" prop="discount_price" align="center"></el-table-column>
                <el-table-column label="小计" align="center">
                    <template slot-scope="{row}">{{ row.price }}</template>
                </el-table-column>
            </el-table>
            <el-row class="label-title">物流信息</el-row>
            <el-form ref="form" label-width="80px" style="margin-top:22px">
                <el-form-item label="物流公司" required>
                    <el-select v-model="logi_code" placeholder="请选择">
                        <el-option v-for="item in express" :key="item.name" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="快递单号" required>
                    <el-input v-model="logi_no" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" size="medium" @click="shipOrder">发 货</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { orderDetail, express, delivery } from '@/api/order/order'
export default {
    data() {
        return {
            oid: '',
            detail: {},
            express: [],
            logi_code: '',
            logi_no: '',
            multipleSelection: []
        }
    },
    beforeMount() {
        this.oid = this.$route.query.oid;
        this.info()
    },

    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        info: function () {
            //this.listLoading = true
            orderDetail({ oid: this.oid }).then(response => {
                //this.listLoading = false
                this.detail = response.data
            })

            express().then(response => {
                this.express = response.data
            })
        },
        shipOrder: function () {
            if (this.multipleSelection.length == 0) {
                this.$message('请选择要发货的商品')
                return false;
            }

            if (this.logi_code.length == 0) {
                this.$message('请选择要发货的物流公司')
                return false;
            }

            if (this.logi_no.length < 6) {
                this.$message('请选正确填写物流单号')
                return false;
            }

            let detail_ids = []
            this.multipleSelection.map(re => {
                detail_ids.push(re.id)
            })

            let data = {
                detail_ids: detail_ids,
                oid: this.oid,
                logi_no: this.logi_no,
                logi_code: this.logi_code
            }

            delivery(data).then(response => {
                if (response.data) {
                    this.$message('发货成功')
                    this.$router.push({ path: '/order/orderDetail?oid=' + this.oid })
                } else {
                    this.$message(response.data.msg)
                }
            })

        },
        ableRow: function (row, index) {
            return row.delivery_status != 1;
        }
    }
}


</script>

<style>
.mixin-components-container {
    background-color: #fff;
    margin-top: 12px;
    min-height: calc(100vh - 84px);
    padding: 18px 30px;
    font-size: 12px;
}

.chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border: 1px solid #f2f3f5;
    height: 180px;
}

.chart-wrapper-info {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border: 1px solid #f2f3f5;
    height: 260px;
}

.title {
    line-height: 42px;
    height: 42px;
}

.title span {
    margin-right: 16px;
}

.order-status {
    font-size: 22px;
    font-weight: 700;
}

.label-title {
    text-align: left;
    background: #fcfcfc;
    padding-left: 12px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #f2f3f5;
    border-bottom: none;
}

.chart-wrapper-info span {
    text-align: right;
    margin-right: 12px;
    width: 30%;
    display: inline-block;
    color: #000;
}

.chart-wrapper-info {
    line-height: 18px;
    color: #666;
}

.text-color {
    color: #666;
}

.el-table {
    font-size: 12px;
}

.el-table thead th {
    background: #f8f8fa;
    color: #000;
    font-size: 12px;
    padding: 0;
    border-top: 1px solid #f2f3f5;
    height: 36px;
    line-height: 36px;
}

.el-table thead th:first {
    border-left: 1px solid #f2f3f5;
}

.el-table thead th:last-child {
    border-right: 1px solid #f2f3f5;
}

.goods-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 18px
}
</style>